<template>
    <div class="m-address">
      <el-form-item label="地址：" prop="districtName">
        <el-select class="select-model" v-model="provinceName" placeholder="请选择" @change="getCity">
          <el-option v-for="(item, i) in provinceOption" :key="item.provinceId" :label="item.provinceName"
                     :value="item.provinceId"></el-option>
        </el-select>
        <el-select class="select-model" v-model="cityName" placeholder="请选择" @change="getDistrict">
          <el-option v-for="(item, i) in cityOption" :key="item.cityId" :label="item.cityName"
                     :value="item.cityId"></el-option>
        </el-select>
        <el-select class="select-model" v-model="districtId" placeholder="请选择" @change="postDistrictId">
          <el-option v-for="(item, i) in districtOption" :key="item.districtId" :label="item.districtName"
                     :value="item.districtId"></el-option>
        </el-select>
      </el-form-item>
    </div>
</template>

<script>
  import $ from 'jquery'

  export default {
    data() {
      return {
        provinceName: '',
        provinceOption: [],
        cityName: '',
        cityOption: [],
        districtName: '',
        districtOption: [],
        districtId: ''
      }
    },
    created() {
      setTimeout(() => {
        this.getProvince()
      }, 20)
    },
    methods: {
      getProvince () {
        $.post('/basis/province.do?method=query', {param: JSON.stringify({})}).then((res) => {
          this.provinceOption = res.maps
        })
      },
      getCity (value) {
        $.post('/basis/city.do?method=query', {param: JSON.stringify({condition: 'provinceId= ' + value})}).then((res) => {
          this.cityOption = res.maps
        })
      },
      getDistrict (value) {
        $.post('/basis/district.do?method=query', {param: JSON.stringify({condition: 'cityId= ' + value})}).then((res) => {
          this.districtOption = res.maps
        })
      },
      postDistrictId() {
        this.$emit('receiveDistrictId', this.districtId)
      }
    }
  }
</script>
<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
.m-address
  .select-model
    & > .el-input
      width 100px
      margin-right 10px
</style>
